<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="80px"
    >
      <el-form-item label="年份" prop="year">
        <el-date-picker
          v-model="queryParams.year"
          size="small"
          value-format="yyyy"
          type="year"
          placeholder="请选择（年）"
          @change="dateChange"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="水管机构" prop="orgCd" width="50px">
          <treeselect
              v-model="queryParams.orgCd"
              :options="xzqhOptions"
              :normalizer="normalizer"
              :show-count="true"
              placeholder="水管机构"
              @select="selectAd"
          />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
    <div style="text-align: center; margin: 10px; font-size: 20px">
      {{chartsTitle}}配水统计分析
    </div>
    <el-tabs type="border-card" >
      <el-tab-pane label="供水统计分析数据" style="padding-bottom: 40px">
        <el-table
          v-loading="loading"
          :data="dateList"
          stripe
        >
          <el-table-column label="月份" align="center" prop="year">
            <template slot-scope="scope">
                <span style="font-weight:700">{{scope.$index + 1}}月</span>
            </template>
          </el-table-column>
          <el-table-column label="实测水量(m³)" align="center" prop="acc">
          </el-table-column>
          <el-table-column
            label="计划用水(m³)"
            min-width="100"
            align="center"
            prop="plan"
          />
          <el-table-column
            label="节约水量(m³)"
            min-width="100"
            align="center"
            prop="availability"
          />
        </el-table>

        <!-- <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        /> -->
      </el-tab-pane>
      <el-tab-pane label="配水统计分析图表">
        <div   id="jcsjtcl_echars"></div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { orgVolAnalys } from "@/api/waterDistribution/distribution";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { organtreeList } from "@/api/common";
import * as echarts from "echarts";
export default {
  components: { Treeselect },
  data() {
    return {
      loading:false,
      dateList:[],
      chartsTitle: "",
      xzqhOptions:[],
      // 查询参数
      queryParams: {
        orgCd: "ORG6543220000",
        year: "",
      },
      waterDistributionList: [],
      wateSupplyList: [],
      availabilityList: [],
      yearList: [1,2,3,4,5,6,7,8,9,10,11,12],
      chanlist:[]
    };
  },
   mounted() {
    var wd = document.body.clientWidth * 0.8;
    document.getElementById("jcsjtcl_echars").style.width = wd + "px";
  },
  created() {
    this.queryParams.year = new Date().getFullYear() + "";
    this.chartsTitle = this.queryParams.year + "年";
    this.getTreeselect()
    this.getUseWaterAnalysis();
  },
  computed:{
    titleStr(){
      let str = ''
      str += this.queryParams.year + '年'
      if(this.chanlist.length >0){
        str+= this.chanlist.filter(item => {return item.orgCd == this.queryParams.orgCd})[0]?.orgNm
      }else{
        str+= '库额尔齐斯镇'
      }
      return str
    }
  },
  methods: {
    /** 查询行政区域下拉树结构 */
    getTreeselect() {
      organtreeList({}).then((response) => {
        this.chanlist = response.data
        this.xzqhOptions = this.handleTree(response.data, "orgCd", "parentOrgCd");
      });
    },
    // 获取区划名称
    selectAd(val) {

    },
    dateChange(value){
      // this.chartsTitle = this.queryParams.year + "年";
    },
    getUseWaterAnalysis() {
      this.loading = true

      orgVolAnalys(this.queryParams).then((response) => {
        this.loading = false
        let arr = []
        for (let index = 0; index < 12; index++) {
          arr.push({
              acc:response.data.acc[index]?response.data.acc[index]:0,
              plan:response.data.plan[index]?response.data.plan[index]:0,
              availability:(response.data.plan[index]-response.data.acc[index]).toFixed(2)?(response.data.plan[index]-response.data.acc[index]).toFixed(2):'--'
          })

        }
        this.dateList = arr;
        this.chartsTitle = this.titleStr
        this.wateSupplyList = response.data.acc;
        this.waterDistributionList = response.data.plan;
        this.availabilityList = arr.map(item => {return item.availability});
        this.yearList = this.yearList.map(item => {return item+'月'});
        this.loadecharts(
          this.yearList,
          this.wateSupplyList,
          this.waterDistributionList,
          this.availabilityList
        );
      });
    },
    handleQuery() {
      this.getUseWaterAnalysis();
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.orgCd,
        label: node.orgNm,
        children: node.children,
      };
    },
    loadecharts(
      yearList,
      wateSupplyList,
      waterDistributionList,
      availabilityList
    ) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("jcsjtcl_echars"));
      // 绘制图表
      myChart.setOption({
        color: ["#2285ea", "#33c38b", "#f67d20"], //"#2dd564", "#f67d20", "#5ed8e5"
        grid: {
          left: "5%",
          right: "5%",
          bottom: "5%",
          top: "15%",
          containLabel: true,
        },
        legend: {
          data: ["实测水量", "计划用水", "节约水量"],
          left: 'right',
          icon: "",
        },
        title: {
          text: "",
          left: "center",
          textStyle: {
            //文字颜色
            color: "#1699F3",
            fontStyle: "normal",
            fontWeight: "bold",
            //字体系列
            fontFamily: "sans-serif",
          },
        },
        tooltip: {
          trigger: "axis",
          formatter(params) {
            let fParams = {};
            let sParams = {};
            let lParams = {};
            let str = "";
            if (params[0]) {
              fParams = params[0];
              str +=
                fParams.name +
                " <br>" +
                fParams.seriesName +
                " : " +
                fParams.value +
                " m³ <br>";
            }
            if (params[1]) {
              lParams = params[1];
              str += lParams.seriesName + " : " + lParams.value + " m³ <br>";
            }
            if (params[2]) {
              sParams = params[2];
              str += sParams.seriesName + " : " + sParams.value + "m³ <br>";
            }
            return str;
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: yearList,
          axisLabel: {
            show: true,
            textStyle: {
              color: "#9e9e9e",
            },
          },
        },
        yAxis: [
          {
            splitLine: { show: false },
            name: "水量(m³)",
            type: "value",
            minInterval: 1, //设置成1保证坐标轴分割刻度显⽰成整数。
            scale: true,
          }
          // ,
          // {
          //   name: "利用系数",
          //   type: "value",
          //   splitLine: { show: false },
          // },
        ],
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 100,
          },
          {
            start: 0,
            end: 100,
          },
        ],
        series: [
          {
            name: "实测水量",
            type: "bar",
            symbol: "none", // 是否显示节点
            barWidth: 20,
            data: wateSupplyList,
          },
          {
            name: "计划用水",
            type: "bar",
            symbol: "none", // 是否显示节点
            barWidth: 20,
            data: waterDistributionList,
          },
          {
            name: "节约水量",
            type: "bar",
            symbol: "none", // 是否显示节点
            barWidth: 20,
            data: availabilityList,
            // yAxisIndex: 1,
            // smooth: true,
          },
        ],
      });
    },
  },

};
</script>
<style lang="scss" scoped>
#jcsjtcl_echars {
  width: 100%;
  height: 600px;
  margin: 30px auto;
}
</style>
